<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ include file="/WEB-INF/jsp/common/taglib.jsp" %>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>employ/list</title>
<style type="text/css">
</style>
</head>
<body>
	<table width="100%" border="0" cellspacing="0" cellpadding="0"
		class="problemDes">
		<tr >
			<td >name</td>
			<td>grender</td>
			<td>title</td>
			<td>tel</td>
			<td>address</td>
		</tr>

		<c:forEach var="employees" items="${employees}">
			<tr>
				<td>${employees.name}</td>
				<td>${employees.grender}</td>
				<td>${employees.title}</td>
				<td>${employees.tel}</td>
				<td>${employees.address}</td>
				<td><button type="submit"
						onclick="location.href='<c:url value='/employInfo/${ employees.id }/toEdit' />'">edit</button></td>
				<td><button type="submit" onclick="toDelete('${employees.id}')">delete</button></td>
			</tr>
		</c:forEach>
	</table>
	<button name=toAdd
		onclick="location.href='<c:url value='/employInfo/add' />'">Add</button>

	<form:form method="get" id="ToEdit">
		<input align="top" id="idEdit" type="hidden" />
	</form:form>

	<form:form method="delete" id="toDelete">
		<input type="hidden" align="top" id="deleteId">
	</form:form>

	<script type="text/javascript">
	
	function toEdit(employeeId){
		var EditId =  document.getElementById("idEdit");
		var ToEdit = document.getElementById('ToEdit');
		EditId.value = employeeId;
		ToEdit.action="<c:url value='/employInfo/'/>" +employeeId+"/toEdit"
		ToEdit.submit();
	}
	
	function toDelete(id){
		if (confirm("Are you sure to delete this?")) {
			var deleteId = document.getElementById("deleteId");
			var toDelete = document.getElementById('toDelete');
			deleteId.value= id;
			toDelete.action="<c:url value='/employInfo/'/>" + id ;
			toDelete.submit();
		}
		
	}
	</script>
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td width="7" align="left" valign="top" height="7"><img
				src="/images/corner_left_top_m.gif"  width="7" /></td>
				
			<td align="center"><img src="/images/spacer.gif" /></td>
			
			<td width="7" align="right" valign="top" height="7"><img
				src="/images/corner_right_top_m.gif"  width="7" /></td>
		</tr>
		<tr>
			<th colspan="4" class="mainFormTitle">list</th>
		</tr>
		<tr>
			<td colspan="4" class="LRBMAIN">
				<table cellpadding="0" cellspacing="0" class="add">
					<tr>
						<td><img src="/images/btn_add.gif" name="btn_add.gif"
							align="absbottom" /><a href="<c:url value='/employInfo/add' />'">Add
								New </a></td>
					</tr>
				</table>
				<table  id="radiotable" class="mainGrid" width="100%" border="0"
					cellpadding="0" cellspacing="0">
					<thead>
						<tr>
							<th width="20%">name</th>
							<th  width="20%">grender</th>
							<th  width="20%">title</th>
							<th  width="20%">tel</th>
							<th  width="20%">address</th>
							<th ></th>
							<th ></th>
						</tr>
					</thead>
					<tbody>

						<c:forEach items="${employees}" var="employees" varStatus="status">
							<tr onmouseover="style.background='#C0C0C0'"
								onmouseout="style.background='#D8D8D8'" 
								id="radiotable_tr_value='${status.index}'">
								
								<td align="center">${employees.name }</td>
								<td align="center">${employees.grender}</td>
								<td align="center">${employees.title}</td>
								<td align="center">${ employees.tel }</td>
								<td align="center">${employees.address }</td>
								
								<td align="center"><button class="toEdit"
										onclick="toEdit('${employees.id}')">
										<img src="/images/btn_edit.gif" name="btn_edit.gif" alt="Edit"
											title="Edit" width="18" height="20" hspace="3" vspace="3"
											border="0" align="absmiddle" />
									</button></td>
									
								<td align="center"><button class="delete"
										onclick="toDelete('${employees.id}')">
										<img src="<s:url value="/images/btn_remove.gif"/>"
											name="btn_remove.gif" alt="Remove" title="Remove" width="18"
											height="20" hspace="3" vspace="3" border="0"
											align="absmiddle" />
									</button></td>
							</tr>
						</c:forEach>

						<c:if test="${ employees == null || fn:length(employees) == 0}">
							<tr id="radiotable_tr_<c:out value="${status.index}"/>">
								<td colspan='99' align='center'><font color='red'>no
										recored.</font></td>
							</tr>
						</c:if>
						
					</tbody>
				</table> 
		
			</td>
		</tr>
		<tr>
			<th colspan="4">
				<table cellpadding="0" cellspacing="0" width="100%">
					<tr>
						<td><table width="100%" border="0" cellspacing="0"
								cellpadding="0">
								<tr>
									<td align="center">&nbsp;</td>
								</tr>
							</table></td>
					</tr>
				</table>
			</th>
		</tr>
		<tr>
			<td align="left" valign="bottom" height="7" width="7"><img
				src="/images/corner_left_bottom_m.gif" /></td>
			<td class="bottomBorderMain"><img src="/images/spacer.gif" /></td>
			<td align="right" valign="bottom" height="7" width="7"><img
				src="/images/corner_right_bottom_m.gif" /></td>
		</tr>
	</table>
	</body>
</html>